<template>
  <!-- 企业成员 -->
  <div class="member">
    <div class="infoMain padding15All">
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="人员列表" name="0">
          <el-form ref="personFormRef" :model="personForm" inline label-position="left" size="small">
            <el-form-item label="姓名" prop="userName">
              <el-input v-model="personForm.userName" placeholder="请输入员工姓名" />
            </el-form-item>
            <el-form-item label="账号" prop="userPhone">
              <el-input v-model="personForm.userPhone" placeholder="请输入员工账号" />
            </el-form-item>
            <el-form-item>
              <el-button @click="resetPersonForm">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getMemberList">搜索</el-button>
            </el-form-item>
          </el-form>
          <div class="memberListBox">
            <div class="tableHeader flexbetween">
              <el-button icon="el-icon-plus" size="small" type="primary" @click="addMemberDialogVisible = true">
                添加成员
              </el-button>
            </div>
            <div class="tableMain">
              <el-table
                v-loading="memberTableLoading"
                :data="memberTableData"
                style="width: 100%;height:100%;"
                tooltip-effect="dark">
                <el-table-column
                  label="序号"
                  type="index">
                </el-table-column>
                <el-table-column
                  label="姓名(昵称)"
                  prop="user_name">
                </el-table-column>
                <el-table-column
                  label="角色"
                  prop="enterprise_user_type">
                  <template slot-scope="scope">
                    <span>{{ scope.row.enterprise_user_type === 1 ? "管理员" : "员工" }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="帐号"
                  prop="user_phone">
                </el-table-column>
                <el-table-column
                  label="实名状态"
                  prop="is_realname"
                >
                  <template slot-scope="scope">
                    {{ scope.row.is_realname === 0 ? "未实名" : "已实名" }}
                  </template>
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button slot-="reference" type="text" @click="deleteMember(scope.row.id)">离职删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="pages padding15All flexright">
            <el-pagination
              :current-page="memberTableCurrentPage"
              :page-size="memberTableCurrentPageSize"
              :page-sizes="[10,20,30,40]"
              :total="memberTableTotal"
              layout="sizes, total, prev, pager, next, jumper"
              @size-change="memberTableSizeChange"
              @current-change="memberTableCurrentChange">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="邀请列表" name="1">
          <el-form ref="inviteFormRef" :model="inviteForm" inline size="small">
            <el-form-item label="员工姓名" prop="userName">
              <el-input v-model="inviteForm.userName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="审批状态" prop="state">
              <el-select v-model="inviteForm.state" placeholder="请选择">
                <el-option label="待审批" value="0"></el-option>
                <el-option label="审批通过" value="1"></el-option>
                <el-option label="审批拒绝" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="resetInviteForm">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" @click="searchInviteForm">搜索</el-button>
            </el-form-item>
          </el-form>
          <div class="memberListBox padding15top">
            <div class="tableMain">
              <el-table
                v-loading="inviteTableLoading"
                :data="inviteTableData"
                style="width: 100%;height:100%;"
                tooltip-effect="dark">
                <el-table-column
                  label="序号"
                  type="index">
                </el-table-column>
                <el-table-column
                  label="被邀人"
                  prop="userName">
                </el-table-column>
                <el-table-column
                  label="帐号"
                  prop="userPhone">
                </el-table-column>
                <el-table-column
                  label="邀请时间"
                  prop="insertTime">
                </el-table-column>
                <el-table-column
                  label="状态"
                  prop="state">
                  <template slot-scope="scope">
                    <span>{{ scope.row.state | filterState }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="examineApprove(true, scope.row.id)" v-show="scope.row.state === 0">确认通过</el-button>
                    <el-button type="text" @click="examineApprove(false, scope.row.id)" v-show="scope.row.state === 0">拒绝加入</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="pages padding15All flexright">
            <el-pagination
              :current-page="inviteTableCurrentPage"
              :page-size="inviteTablePageSize"
              :page-sizes="[10,20,30,40]"
              :total="inviteTableTotal"
              layout="sizes, total, prev, pager, next, jumper"
              @size-change="inviteTableSizeChange"
              @current-change="inviteTableCurrentChange">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog :visible.sync="addMemberDialogVisible" title="添加成员" width="32%" @close="addMemberDialogClose">
      <el-form ref="addMemberRef" :model="addMemberModel" :rules="addMemberModelRules" inline size="small">
        <el-form-item label="名称" prop="userName">
          <el-input v-model="addMemberModel.userName" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="userPhone">
          <el-input v-model="addMemberModel.userPhone" maxlength="11" placeholder="请输入手机号"
                    show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer flexcenter">
        <el-button size="small" @click="addMemberDialogClose">取消</el-button>
        <el-button :loading="addMemberLoading" size="small" type="primary" @click="addMember">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getEnterpriseUserDel,
  getEnterpriseUserList,
  getInvitationList,
  getInvitationListState,
  postAddenterpriseUser
} from "@/api/business";

export default {
  data() {
    return {
      activeName: "0",
      enterpriseId: localStorage.getItem("companyid") | "",
      personForm: {
        userName: null,
        userPhone: null
      },
      memberTableLoading: false,
      memberTableCurrentPage: 1,
      memberTableCurrentPageSize: 10,
      memberTableTotal: 0,
      memberTableData: [],
      addMemberDialogVisible: false,
      addMemberModel: {},
      addMemberModelRules: {
        userName: [{ required: true, message: "请填写姓名", trigger: "blur" }],
        userPhone: [
          { required: true, message: "请填写手机号", trigger: "blur" },
          { pattern: /^1\d{10}$/, message: "请填写正确的手机号", trigger: "blur" }
        ]
      },
      addMemberLoading: false,

      inviteForm: {
        userName: null,
        state: null
      },
      inviteTableData: [],
      inviteTableLoading: false,
      inviteTableCurrentPage: 1,
      inviteTablePageSize: 10,
      inviteTableTotal: 0
    };
  },
  mounted() {
    this.init();
  },
  filters: {
    filterState(val) {
      if (val === 0) {
        return "待审批";
      } else if (val === 1) {
        return "审批通过";
      } else if (val === 2) {
        return "审批拒绝";
      }
    }
  },
  methods: {
    tabClick(e) {
      if (e.index === "0") {
        this.getMemberList();
      } else {
        this.pageGetInvitationList();
      }
    },
    init() {
      this.getMemberList();
      // this.pageGetInvitationList();
    },
    resetPersonForm() {
      this.$refs.personFormRef.resetFields();
      this.getMemberList();
    },
    getMemberList() {
      this.memberTableLoading = true;
      getEnterpriseUserList({
        enterpriseId: this.enterpriseId,
        pageNum: this.memberTableCurrentPage,
        pageSize: this.memberTableCurrentPageSize, ...this.personForm
      }).then(res => {
        this.memberTableLoading = false;
        this.memberTableData = res.result.List;
        this.memberTableTotal = res.result.totel;
      });
    },
    addMember() {
      this.$refs.addMemberRef.validate(bool => {
        if (bool) {
          // this.addMemberLoading = true
          postAddenterpriseUser({
            signEnterpriseId: this.enterpriseId,
            userName: this.addMemberModel.userName,
            userPhone: this.addMemberModel.userPhone
          }).then(res => {
            this.addMemberLoading = false;
            if (res.code === 200) {
              this.$message.success(res.message);
              this.addMemberDialogClose();
              this.getMemberList();
            }
          });
        }
      });
    },
    addMemberDialogClose() {
      this.addMemberDialogVisible = false;
      this.$refs.addMemberRef.resetFields();
    },
    memberTableSizeChange(e) {
      this.memberTableCurrentPageSize = e;
      this.getMemberList();
    },
    memberTableCurrentChange(e) {
      this.memberTableCurrentPage = e;
      this.getMemberList();
    },
    deleteMember(id) {
      this.$alert("确定删除么", "离职删除", {
        confirmButtonText: "确定",
        cancelButtonText: "点错了",
        showCancelButton: true,
        callback: action => {
          if (action === "confirm") {
            getEnterpriseUserDel({ enterpriseUserId: id }).then(res => {
              if (res.code === 200) {
                this.$message.success(res.message);
                this.getMemberList();
              }
            });
          }
        }
      });
    },
    pageGetInvitationList() {
      this.inviteTableLoading = true;
      getInvitationList({
        enterpriseId: this.enterpriseId,
        pageNum: this.inviteTableCurrentPage,
        pageSize: this.inviteTablePageSize, ...this.inviteForm
      }).then(res => {
        this.inviteTableLoading = false;
        this.inviteTableData = res.result.records;
        this.inviteTableTotal = res.result.total;
      });
    },
    resetInviteForm() {
      this.$refs.inviteFormRef.resetFields();
      this.pageGetInvitationList();
    },
    searchInviteForm() {
      this.pageGetInvitationList();
    },
    examineApprove(bool, id) {
      this.$alert(bool ? "确定通过吗？" : "确定拒绝吗？", "正在审批", {
        confirmButtonText: "确定",
        cancelButtonText: "点错了",
        showCancelButton: true,
        callback: action => {
          if (action === "confirm") {
            getInvitationListState({ enterpriseUserRequestId: id, state: bool ? 1 : 2 }).then(res => {
              if (res.code === 200) {
                this.$message.success(bool ? "通过成功" : "拒绝成功");
                this.pageGetInvitationList();
              }
            });
          }
        }
      });
    },
    inviteTableSizeChange(e) {
    },
    inviteTableCurrentChange(e) {
    }
  }
};
</script>

<style lang="scss" scoped>
.member {
  height: 100%;
  background-color: #fafafa;
  padding: 15px;

  .infoMain {
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;

    .pages {
      width: calc(100% - 30px);
      border-top: 2px solid #F5F6F7;
    }
  }


}

</style>